<template>
    <div class="chatbox" @click="maxWrap">
		<!-- header -->
		<div v-if="false" class="header">
			<div class="fav-head flex flex-space-x flex-center-y">
				<span class="fav-head-left" @click="goBack">
					<van-icon name="arrow-left" size="0.48rem" color="#fff" class="c-icon"/>
				</span>
				<span class="fav-head-title c-line-clamp1">{{title}}({{num}})</span>
				<div class="rightText" @click="toDetail()">
					<img src="@/assets/img/performance/msgCenter/profile.png" class="icon">
				</div>
			</div>
			<div class="height"></div>
		</div>
		<!-- main -->
		 <!-- :style="{height: chatWindowsHeight}" -->
		<!-- :style="{height: chatBoxHeight}" -->
		<div class="chat-box"  :style="{...footerStyle, height: chatWindowsHeight}" ref="mainoverflow">
			<div class="chat" ref="main" @click.stop="show_emo = false,show_more = false" @touchstart.stop="footer=false,show_emo = false,show_more = false">
				<div class="list-more" @touchstart.stop="load_list()" v-if="pageCurrent<pageTotal">加载更多记录</div>
				<!-- ********** 遍历 *********** -->
				<div class="item" v-for="(item,index) in formData" :key="index">
					<!-- 时间 -->
					<div class="time flex flex-center-x">
						<span>{{item.time | toDate}}</span>
					</div>
					<!-- 结算收图 -->
					<p class="remind" v-if="item.type == 'remindOver'">"{{item.fromName}}"提醒 <span>结算收图</span></p>
					<!-- 请求改时 -->
					<p class="remind" v-if="item.type == 'remindTime'">"{{item.fromName}}"请求 <span>修改时间</span></p>
					<!-- 上传图片 -->
					<p class="remind" v-if="item.type == 'remindUpload'">"{{item.fromName}}"提醒 <span>上传图片</span></p>
					<!-- 提醒付款 -->
					<p class="remind" v-if="item.type == 'remindPay'">"{{item.fromName}}"提醒 <span>付款</span></p>
					<!-- 确认 -->
					<p class="remind" v-if="item.type == 'remindConfirm'">"{{item.fromName}}"提醒 <span>确认图片</span></p>
					<!-- 改图 -->
					<p class="remind" v-if="item.type == 'remindModif'">"{{item.fromName}}" <span>请求改图</span></p>
					<!-- 开启计时 -->
					<p class="remind" v-if="item.type == 'timerAgree'">“{{item.fromName}}”同意开启 <span>计时器</span></p>
					<!-- 请求开始计时 -->
					<p class="remind" v-if="item.type == 'timerStart'">“{{item.fromName}}”请求开始计时</p>
					<!-- 暂停计时 -->
					<p class="remind" v-if="item.type == 'timerPause'">“{{item.fromName}}”已暂停计时</p>
					<!-- 完成计时 -->
					<p class="remind" v-if="item.type == 'timerFinish'">“{{item.fromName}}”已完成计时</p>
					<!-- 继续计时 -->
					<p class="remind" v-if="item.type == 'timerContinue'">“{{item.fromName}}”已继续计时</p>
					<!-- 请求改时 -->
					<p class="remind" v-if="item.type == 'timerModif'">“{{item.fromName}}”请求 <span>修改时间</span></p>
					<!-- 人物头像 -->
					<div
						class="profile"
						:class="{self:userId==item.fromUser,other:userId!=item.fromUser}"
						v-if="item.type == 'text'
                        || item.type == 'txt'
                        || item.type == 'image'
                        || item.type == 'map'
                        || item.type == 'editImg'
                        || item.type == 'works'
                        || item.type == 'editNone'
						|| item.type == 'voice'">
						<!-- 头像 -->
						<div class="pic" v-if="userId!=item.fromUser">
							<img :src="item.pic" @error="imgError(item)">
						</div>
						<!-- 内容 -->
						<div class="right">
							<div class="name">{{item.fromName}}</div>
							<!-- 纯文本 -->
							<div 
								v-html="enter(item.payload)"
								class="msg" 
								v-if="item.type == 'txt'"></div>
							<!-- 语音 -->
							<span v-if="item.type == 'voice'" class="voiceLength">{{item.length}}''</span>
							<div
								@touchend="playVoice(item.payload,index)"
								class="msg"
								v-if="item.type == 'voice'"
								:style="{width:item.length<=10?'66px':'88px'}">
								<img src="@/assets/img/performance/msgCenter/chatPlay.png"
									style="width: 0.18rem;"
									v-if="!item.click"
									class="playImg">
								<img src="@/assets/img/performance/msgCenter/chatPlay.gif"
									style="width: 0.18rem;"
									v-if="item.click"
									class="playImg">
							</div>
							<!-- 表情兼文本（废弃） -->
							<div class="msg" v-if="item.type == 'text'">{{item.payload}}</div>
							<img :src="item.payload" v-else-if="item.type == 'image'" @click.stop="preview(item.payload)">
                            <img :src="item.payload" v-else-if="item.type == 'editNone'" @click.stop="preview(item.payload)">
							<!-- 编辑图片 -->
							<div 
								class="editImg" 
								v-else-if="item.type == 'editImg'"
								:class="{'editImgEnd':userId==item.fromUser}">
								<p v-if="userId==item.fromUser" style="margin-right: 8px;">已编辑</p>
								<img :src="item.payload" @click.stop="ToeditImg(item.uid)">
								<p v-if="userId!=item.fromUser" style="margin-left: 8px;">已编辑</p>
							</div>
							<!-- 来自作品的图片 -->
							<div class="works" v-else-if="item.type == 'works'">
								<img :src="item.payload" @click.stop="preview(item.payload)" class="img">
								<p>
									<img src="@/assets/img/performance/msgCenter/icon_works.png" style="width: .18rem;">
									{{item.fromName}}作品中心
								</p>
							</div>
							<!-- 地图 -->
							<div class="map" v-else-if="item.type == 'map'" @click="toMap(item.payload)">
								<div class="title">
									<h3>{{item.title}}</h3>
									<p>{{item.address}}</p>
								</div>
								<position :DOM="`map${index}`" :position="item.payload"></position>
							</div>
						</div>
						<!-- 头像 -->
						<div class="pic" v-if="userId==item.fromUser">
							<img :src="item.pic" @error="imgError(item)">
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 屁股 -->
		<div class="footer" :style="footerStyle" @submit.prevent="sendMsg('text',msg)" ref="footermain">
			<div class="plus">
				<img src="@/assets/img/performance/msgCenter/emo.png"
					@click.stop="show_emo = !show_emo,
					show_more = false,
					messageSendType = 'emo',
					showVoice = false,
					updateChatWindowsHeight()">
				<img src="@/assets/img/performance/msgCenter/keyboard.png" @click.stop="showVoice = false" v-show="showVoice">
				<img src="@/assets/img/performance/msgCenter/voice.png" 
					@click.stop="showVoice = true,show_emo = false,show_more = false" 
					v-show="!showVoice">
				<img src="@/assets/img/performance/msgCenter/add.png"
					@click.stop="show_more = !show_more,
					show_emo = false,
					showVoice = false,
					updateChatWindowsHeight()">
			</div>
			<!-- 输入框 -->
			<div class="into flex flex-center-y" v-show="!showVoice">
				<textarea
					type="text"
					rows="1"
					autoHeight="true"
					class="input"
					v-model="msg"
					@focus="inputFocus"
					@blur="inputBlur"
					@click="tapMsgInput"
					@input="messageSendType = 'txt'"
					ref="myInput">
				</textarea>
				<div class="right" @click="sendMsg('text',msg)">发送</div>
			</div>
			<!-- 语音输入框 -->
			<div id="voice" style="margin-top: 1.2rem;" v-show="showVoice">
				<!-- 按钮 -->
				<div
					ref="footer"
					:class="{'press':speakText == '松开结束'}"
					class="btn"
					@touchstart.stop="speakStart"
					@touchmove.stop="speakMove"
					@touchend.stop="speakEnd">
					{{speakText}}
				</div>
			</div>
			<!-- 表情 -->
			<div class="emo" v-if="show_emo">
				<emoji @selectEmo="selectEmo" id="emoji"></emoji>
			</div>
			<!-- more -->
			<div class="more" v-if="show_more">
				<li @click="openImg()">
					<img src="@/assets/img/performance/msgCenter/img.png">
					<p>图片</p>
				</li>
				<li @click="openCamera()">
					<img src="@/assets/img/performance/msgCenter/camera.png">
					<p>拍照</p>
				</li>
				<li @click="openWorks()" v-if="roleId == 2">
					<img src="@/assets/img/performance/msgCenter/works.png">
					<p>作品中心</p>
				</li>
				<li @click="openMap()" v-if="roleId == 1">
					<img src="@/assets/img/performance/msgCenter/location.png">
					<p>位置</p>
				</li>
				<li @click="toHistory()">
					<img src="@/assets/img/performance/msgCenter/file.png">
					<p>历史文件</p>
				</li>
				<!-- 设计师才有投诉 -->
				<li @click="toSuggest()" v-if="roleId == 1">
					<img src="@/assets/img/performance/msgCenter/suggest.png">
					<p>投诉建议</p>
				</li>
			</div>
		</div>
		<img :src="mincoo">
		<!-- 录音动画 -->
		<div class="speak" v-show="showVoice2">
			<img src="@/assets/img/performance/msgCenter/icon_voice.gif">
			<p>{{speakText=='松开结束'?'正在录音':speakText}}</p>
		</div>
		<!-- 保存图片到本地 -->
		<download :showDown="showImages" :url="imgUrl"></download>
		<!-- 预览图片 -->
		<van-image-preview
			v-model="showImages"
			:images="images"
			:startPosition="nImages">
		</van-image-preview>
		<!-- @功能 -->
		<van-popup v-model="at" position="right" :overlay="false">
			<div class="at">
				<ul>
					<li v-for="item in groupInfo" :key="item.uid" @click.stop="atFun(item.uid,item.userName)">
						<div class="pic">
							<img :src="item.pictureUrl">
						</div>
						<p class="name">{{item.userName}}</p>
					</li>
				</ul>
			</div>
		</van-popup>
    </div>
</template>
<script>
import {formatDate} from '@/utils/date.js' //时间戳
import apiConfig from '@/api/index'
import {inputAbsolute} from '@/utils/ios'
import emoji from '@/components/performance/msgCenter/emoji/index' //emoji表情
import download from '@/components/performance/msgCenter/download' //下载图片
import voice from '@/components/performance/msgCenter/voice' //语音输入
import {getuserUid,getRole,getToken,getUserInfo} from '@/utils/auth.js'
import {getHistory,setHistory,unique,toDate,getBase64Image,clearHot,setHot,getCursortPosition,compressImage,toBase64} from '@/utils/chat.js'
import position from '@/components/performance/msgCenter/map'  //地图
import pushMsg from '@/utils/push.js'
import unread from '@/utils/unread.js'

function getChatWindowsHeight() {
	let _innerWidth = window.innerWidth / 7.5 * .6
	let title = window.innerWidth / 7.5 * 1.6
	let emHeight = 0
	// this.chatWindowsHeight = plus ? (plus.screen.resolutionHeight - title - 输入区域高度) + 'px' : '500px'
	console.log('this.messageSendType, this.show_emo')
	console.log(this.messageSendType, this.show_emo)
	// if(this.messageSendType === 'emo' && this.show_emo){
	// 	emHeight = window.innerWidth / 7.5 * 3
	// 	console.log('进来了~~~~~~~~~~~~')
	// }
	let chatWindowsHeight = (window.innerHeight - emHeight) + 'px'
	console.log('compute chatWindowsHeight')
	console.log(chatWindowsHeight)
	return  chatWindowsHeight
}

var WV_right = {
	id: 'right',
	tag: 'img',
	src: location.protocol === 'http:' ? 'http://192.168.0.111:8080/icon/profile.png' : './icon/profile.png',
	position: {top:'11px',right:'18px',width:'20px',height:'20px'},
	sprite: {top:'0px',left:'0px',width:'100%',height:'100%'}
}
var MV_back = {
	id: 'back',
	tag: 'img',
	src: location.protocol === 'http:' ? 'http://192.168.0.111:8080/back.png' : './back.png',
	position: {top:'11px',left:'18px',width:'10px',height:'18px'},
	sprite: {top:'0px',left:'0px',width:'100%',height:'100%'}
}
var MV_title = (name) => {
	return {tag:'font', id:'titlename', text: name, textStyles: { size: '18px', color: '#fff' }}
}

export default {
	components:{
		position,
		emoji,
		download,
		voice
	},
    data(){
		return{
			mincoo:"",
			//msg
			formData:[
				// {
				// 	type:'text',
				// 	msgId:'599396448542394412',
				// 	time:1557122660953,
				// 	fromUser:'admin', //发送人id
				// 	fromName:'测试', //发送人name
				// 	pic:"",  //头像
				// 	payload:'你是谁', //聊天内容
				// },
				// {
				// 	type:"image",
				// 	msgId:'599396448542394414',
				// 	time:1557122660955,
				// 	fromUser:'834532c343a911e9855d6045cb8a6182', //发送人id
				// 	fromName:'吴彦祖', //发送人name
				// 	pic:"",  //头像
				// 	payload:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1122649470,955539824&fm=27&gp=0.jpg;', //聊天内容
				// },
				// {
				// 	type:"works",
				// 	msgId:'599396448542394414',
				// 	time:1557322660955,
				// 	fromUser:'834532c343a911e9855d6045cb8a6182', //发送人id
				// 	fromName:'吴彦祖', //发送人name
				// 	pic:"",  //头像
				// 	payload:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1122649470,955539824&fm=27&gp=0.jpg;', //聊天内容
				// },
				// {
				// 	type:'map',
				// 	msgId:'599396448542394442',
				// 	time:1557122660953,
				// 	fromUser:'834532c343a911e9855d6045cb8a6182', //发送人id
				// 	fromName:'测试', //发送人name
				// 	pic:"",  //头像
				// 	payload:[114.95699,23.54317], //聊天内容
				// 	title:"可飞猪有限公司",
				// 	address:"深圳市南山区可飞猪有限公司"
				// },
			],
			pageCurrent:1, //当前页
			pageTotal:"", //总共多少页数

			//header
			title:"",
			num:0,

			//main
			msg:"",
			emoIndex:0, //用来判断是否纯文本,0表示没表情

			//footer
			footer:false,  //true为绝对定位,false固定定位
			show_emo:false,
			show_more:false,

			//预览图片
			showImages:false,
			nImages:0,
			images:[],
			base64:"",
			imgUrl:"",  //当前图片的url地址

			//other
			userId:"",
			roleId:"",
			nowTimer:"", //当前时间戳
			once:true,

			//@功能
			at:false,
			atId:[], //@谁
			groupInfo:[],  //群成员（不包含自己）
			member:[], //群成员（所有人）

			//滚动条
			mainHeight:0, //main元素的高度

			//语音
			player:"",
			showVoice:false,  //是否显示语音，true为显示
			audioUrl:"",

			//toast
			toast:"",

			chatWindowsHeight: getChatWindowsHeight.bind(this)(),

			// messageSendType
			messageSendType: '',

			chatBoxHeight: 'calc(100vh - .9rem)',

			footerStyle: {
				position: inputAbsolute() ? 'absolute' : 'fixed',
			},

			isLoadTitle: false,

			WV: null,
			innerHeights: [],
			
			//按住讲话
			speakText:"按住说话",
			posStart:0,//初始化起点坐标
			posEnd:0,//初始化终点坐标
			posMove:0,//初始化滑动坐标
			voiceLen:0,  //语音时长
			timer:"", //定时器
			voiceTimer:"", //语音时间
			voiceStatus:true, //true才能提交
			voiceObj:"",  //录音对象
			showVoice2:false,
			voicePath:"", //录音完成后的地址（本地）
			
			//当前订单是否完成
			orderFinish:false,
		}
	},
	watch:{
		//@功能
		msg:function(x,y){
			//如果是输入新文本
			if(x.length > y.length){
				let n = this.msg.length;
				if(this.msg[n-1] == '@'){
                    this.$refs.myInput.blur();
					this.at = true;
				}
			}
			//this.getHight();  //获取textarea的高度
		},
		//滚动到最底部
		formData:function(x,y){
			if(this.pageCurrent == 1){
				setTimeout(()=>{
					this.scrollBottom();
				},500)
			}
		},
		showVoice(val){
			if(!val){
				this.$refs.myInput.focus();
			}
		},
		title(v){
			// if(this.isLoadTitle){
			// 	return
			// }
			this.isLoadTitle = true
			let titleName = `${v}(${this.num})`
			this.WV && this.WV.draw([ MV_title(titleName) ])
		}
	},
	methods:{
		//聊天记录
		list:function(){
			if(!this.$route.query.id){
				console.log('QAQ 聊天室已离开后的请求')
				return
			}
			HTTP('record',{
				pageNum:this.pageCurrent,
				pageSize:10,
				userUid:this.userId,
				groupUid:this.$route.query.id,
				msgId:""
			})
			.then(res=>{
				if(res.code == 200){
					console.log(res);
					this.pageTotal = res.data.pages;
					let local = getUserInfo();
					console.log('改过头像:' + this.$store.state.modifProfile);
					res.data.list.map(o=>{
						let obj = JSON.parse(o.payload);
						//预览图片数组
						if(obj.ext.type == "image" || obj.ext.type == "works" || obj.ext.type == "editNone"){
							let url = obj.bodies[0].url?obj.bodies[0].url:obj.ext.content;
							this.images.unshift(url);
						}
						this.formData.unshift({
							uid:obj.ext.uid?obj.ext.uid:'', //编辑图片才有
							type:obj.ext.type, //类型
							msgId:o.msgId, //消息id
							time:parseInt(o.time), //发送时间
							fromUser:o.fromUser, //发送人id
							fromName:this.getName(o.fromUser), //发送人名字
							//fromName:obj.ext.name, //发送人名字
							pic:this.$store.state.modifProfile&&this.userId==o.fromUser?local.pictureUrl:obj.ext.photoUrl,  //头像
							payload:obj.ext.content?obj.ext.content:obj.bodies[0].url,  //内容，不存在的就是视频（图片）
							coverPage:obj.ext.type=='video'?obj.ext.coverPage:'',  //视频封面
							title:obj.ext.title?obj.ext.title:'', //地图标题
							address:obj.ext.address?obj.ext.address:'', //地图地址
							length:obj.ext.length?obj.ext.length:'', //语音时长
							click:false  //语音波纹
						});
					})
					//滑到最底部
					this.imgLoad(this.images)
					.then(res=>{
						this.scrollBottom();
					})
				}
				else{
					this.$toast(res.msg);
				}
			})
		},
		//根据uid得到它的name
		getName:function(uid){
			let name ="";
			this.member.map(o=>{
				if(o.id == uid){
					name = o.name;
				}
			})
			return name;
		},
		//加载聊天记录
		load_list:function(){
			if(this.pageCurrent<this.pageTotal){
				this.pageCurrent++;
				this.list();
			}
		},
		//开始录音
		speakStart:function(event){
			this.voiceStatus = true; //为true才能提交
			this.speakText = "松开结束";
			this.posStart = event.touches[0].pageY;
			this.showVoice2 = true; //显示悬浮物
			//获取时长
			this.voiceLen = 0;
			this.timer = setInterval(()=>{
				if(this.voiceLen >= 60){
					this.speakEnd(); //结束录音
				}
				else{
					this.voiceLen++;
				}
			},1000)
			//语音输入
			this.voiceObj = plus.audio.getRecorder();
			if(this.voiceObj == null){
				console.log('录音对象为空');
			}
			this.voiceObj.record( {
				filename:"_doc/audio/tuxiaozhu/",
				format:"mp3"
			}, (res)=> {
				//true才能上传
				if(this.voiceStatus){
					console.log(res);
					let obj = {
						path:res,
						time:this.voiceLen==0?1:this.voiceLen
					};
					this.uploadVoice(obj);
				}
			}, e=>{
				this.$toast('录音失败');
				console.log(e);
			});
		},
		//滑动时
		speakMove:function(event){
			this.posMove = 0;
			this.posMove = event.targetTouches[0].pageY;  //获取滑动实时坐标
			if(this.posStart - this.posMove < this.$refs.footer.clientHeight){
				console.log('松开结束');
				this.speakText = '松开结束';
				this.voiceStatus = true; //为true才能提交
			}
			else{
				console.log('取消发送');
				this.speakText = '取消发送';
				this.voiceStatus = false; //为true才能提交
			}
		},
		//结束录音
		speakEnd:function(event){
			console.log('手指松开...');
			clearInterval(this.timer);
			console.log('时长：' + this.voiceLen);
			//如果录音时间符合规范
			if(this.voiceLen<60){
				console.log('录音符合规范');
				this.posEnd = 0;
				this.posEnd = event.changedTouches[0].pageY; //获取终点坐标
				//发送成功
				if(this.posStart - this.posEnd < this.$refs.footer.clientHeight){
					//提交
					if(this.voiceStatus){
						//结束录音
						this.voiceObj.stop();
						this.showVoice2 = false; //隐藏悬浮物
						this.showSpeak = false;
						this.voiceNum++;
						this.speakText = '按住说话';
						console.log('提交');
					}
				}
				//取消发送
				else{
					console.log('老子不发了');
					this.voiceObj.stop(); //结束录音
					this.showVoice2 = false; //隐藏悬浮物
					this.speakText = '按住说话';
				}
			}
			//录音时间不符合规范
			else{
				//结束录音
				this.voiceObj.stop();
				this.showVoice2 = false; //隐藏悬浮物
				this.showSpeak = false;
				console.log('结束录音');
			}
		},
		//标题
		getTitle:function(){
			HTTP('group_detail',{
				groupUid:this.$route.query.id,
				userUid:this.userId
			})
			.then(res=>{
				if(res.code == 200){
					this.title = res.data[0].name;  //群名
					this.num = res.data[0].affiliations_count;  //群人数
				}
				else{
					this.$toast(res.msg);
				}
			})
		},
		//加载群组人员信息
		getGroupInfo:function(){
			HTTP('group_detail',{
				groupUid:this.$route.query.id,
				userUid:this.userId
			})
			.then(res=>{
				if(res.code == 200){
					console.log(res);
					//不能@自己
					if(res.data[0].affiliations){
						res.data[0].affiliations.map(o=>{
							if(o.uid != this.userId){
								this.groupInfo.push(o);
							}
							this.member.push({
								id:o.uid,
								name:o.userName
							});
						})
					}
					this.list(); //聊天记录
				}
				else{
					this.$toast(res.msg);
				}
			})
		},
		//获取textarea高度
		getHight:function(){
			console.log(this.$refs.myInput.scrollHeight);
			//控制最大高度100px
			if(this.$refs.myInput.scrollHeight<100){
				this.$refs.myInput.style.height = this.$refs.myInput.scrollHeight + 'px';
			}
			else{
				this.$refs.myInput.style.height = '100px';
			}
		},
		//解决聊天记录不更新name的bug
		load_member:function(){
			HTTP('group_detail',{
				groupUid:this.$route.query.id,
				userUid:this.userId
			})
			.then(res=>{
				if(res.code == 200){
					this.member
				}
			})
		},
		//@功能
		atFun:function(id,name){
			console.log(id);
			this.at = false;
			this.atId.push(id);
			this.msg = this.msg + name + ' ';
		},
		//跳到编辑图片
		ToeditImg:function(uid){
			this.$router.push({
				path:'/performance/picture',
				query:{
					uid:uid
				}
			});
		},
		//后退
		goBack:function(){
			this.$router.back();
		},
		//群组详情
		toDetail:function(){
			this.$router.push({
				path:'/performance/chatDetail',
				query:{
					id:this.$route.query.id
				}
			});
		},
		//整体区域点击
		maxWrap:function(e){
			//this.show_emo = false;
			this.show_more = false;
		},
		//选择表情
		selectEmo:function(i){
			let n = getCursortPosition(this.$refs.myInput); //获取光标的位置
			//this.msg = this.msg.replace(/^(.{n})/,'$1' + i);
			this.msg = this.msg + i;
			this.messageSendType = 'emo'
		},
		//投诉建议
		toSuggest:function(){
			this.$router.push({
				path:'/performance/suggest',
				query:{
					groupId:this.$route.query.id,
					orderId:this.$route.query.orderId
				}
			});
		},
		//历史文件
		toHistory:function(){
			this.$router.push({
				path:'/performance/history',
				query:{
					groupId:this.$route.query.id,
					orderId:this.$route.query.orderId
				}
			});
		},
		//判断图片是否加载完成
		imgLoad:function(pics){
			return new Promise((resolve,reject)=>{
				const picsAll = pics.map((imgurl) => {
					return new Promise((resolve, reject) => {
						const img = new Image();
						img.src = imgurl;
						img.onload = () => resolve(imgurl);
						img.onerror = () => reject(new Error(imgurl + ' load error'));
					})
				});
				Promise.all(picsAll).then(() => {
					resolve('success');
				}).catch((e) => {
					reject('error');
				})
			})
		},
		//加载中
		loading:function(msg){
			const toast = this.$toast.loading({
				duration: 0,
				mask: false,
				message: msg,
				forbidClick:true
			});
			return toast;
		},
		//上传图片，然后跳到编辑图片
		uploadImg_edit:function(url){
			console.log('开始上传');
			//开始上传
			HTTP('upload',{
				base64file:url
			})
			.then(res=>{
				if(res.code == 200){
					this.toast.clear();
					//跳转
					this.$router.push({
						path:'/performance/preview',
						query:{
							bg:res.data,
							groupId:this.$route.query.id,
							orderId:this.$route.query.orderId
						}
					});
				}
				else{
					this.$toast(res.msg);
				}
			})
		},
		//打开相册
		openImg:function(){
			plus.gallery.pick(path=> {
				var _this = this;
				if(path){
					this.toast = this.loading('加载中');
					// 压缩图片
					compressImage(path)
					.then(res=>{
						// 转base64
						toBase64(res)
						.then(base64=>{
							if(this.roleId == 1){
								this.uploadImg_edit(base64); //跳到编辑图片
							}
							//表现师
							else{
								this.sendImage(res,base64);
							}
						})
					})
				}
			},
			{
				filter: "image"
			});
		},
		//拍照
		openCamera:function(){
			var cmr = plus.camera.getCamera();
			var _this = this;
			cmr.captureImage(path=>{
				console.log('打开相机2');
				if(path){
					this.toast = this.loading('加载中');
					//相对路径=>绝对路径
					plus.io.resolveLocalFileSystemURL(path, entry=> {
						compressImage(entry.toLocalURL())
						.then(res=>{
							entry.file(file=>{
								// 转base64
								var fileReader = new plus.io.FileReader();
								fileReader.readAsDataURL(file);
								fileReader.onload = e=> {
									this.sendImage(res,e.target.result);
								}
							});
						})
					}, function(e) {
						plus.nativeUI.toast("读取拍照文件错误：" + e.message);
					});
				}
			})
		},
		//地图详情
		toMap:function(position){
			this.$router.push({
				path:'/position',
				query:{
					position:position
				}
			})
		},
		//跳到地图
		openMap:function(){
			this.$router.push({
				path:'/map',
				query:{
					id:this.$route.query.id,
					orderId:this.$route.query.orderId,
				}
			})
		},
		//跳到作品
		openWorks:function(){
			this.$router.push({
				path:'/performance/works',
				query:{
					id:this.$route.query.id,
					orderId:this.$route.query.orderId,
				}
			})
		},
		//失效图片处理
		imgError:function(item){
			item.pic = require('@/assets/img/performance/msgCenter/default.png');
		},
		//预览图片
		preview:function(img){
			this.imgUrl = img;  //传给子组件用的
			let index=0;
			let arrImg = [];
			//根据图片得到index
			this.images.map((o,n)=>{
				if(o == img){
					index = n;
				}
			})
			this.nImages = index;
			this.showImages = true;
		},
		//播放声音
		playVoice:function(url,n){
			//新目标
			if(this.audioUrl != url){
				console.log('新目标');
				//把之前的暂停
				if(this.player){
					this.player.stop();
				}
				this.audioUrl = url;
				this.player = plus.audio.createPlayer(url);
				this.wave(n,true);  //开启波纹
				//播放结束的回调
				this.player.play(()=>{
					console.log('播放结束的回调');
					this.player = "";
					this.audioUrl = "";
					this.wave(n,false);  //关闭波纹
				});
			}
			else{
				//如果已经暂停/停止，让它播放
				if(this.player.isPaused()){
					console.log('如果已经暂停/停止，让它播放');
					this.audioUrl = url;
					this.player = plus.audio.createPlayer(url);
					this.wave(n,true);  //开启波纹
					//播放结束的回调
					this.player.play(()=>{
						console.log('播放结束的回调');
						this.player = "";
						this.audioUrl = "";
					});
				}
				//如果正在播放中，让它停止
				else{
					console.log('如果正在播放中，让它停止');
					this.player.stop();
					this.player = "";
					this.audioUrl = "";
					this.wave(n,false);  //关闭波纹
				}
			}
		},
		//开启/结束波纹
		wave:function(n,bol){
			console.log('波纹');
			//先关闭所有波纹
			if(bol){
				this.formData.map(o=>{
					if(o.click){
						o.click = false;
					}
				})
			}
			//开启/关闭
			this.formData[n].click = bol;
		},
		//环信监听
		webIm:function(){
			this.$imconn.listen({
				//收到消息
				onTextMessage:(data)=>{
					console.log(data);
					//如果是当前群聊
					if(data.to == this.$route.query.id && data.from != this.userId){
						//推送
						// if(document.hidden || document.visibilityState == 'hidden'){
						// 	pushMsg(data,'group');
						// }
						//文本消息
						var timestamp = Date.parse(new Date()); //当前时间戳
						this.formData.push({
							uid:data.ext.uid?data.ext.uid:'', //编辑图片才有
							type:data.ext.type, //text,image,video,remind,map
							msgId:data.id, //消息id
							time:timestamp,
							fromUser:data.from, //发送人id
							fromName:data.ext.name, //发送人名字
							pic:data.ext.photoUrl,
							payload:data.ext.content, //聊天内容
							title:data.ext.title?data.ext.title:'', //地图消息，标题
							address:data.ext.address?data.ext.address:'',//地图消息，地址
							length:data.ext.length?data.ext.length:'',//语音时长
							click:false  //语音波纹 
						})
						//预览图片数组
						if(data.ext.type == "works" || data.ext.type == "editNone"){
							let url = data.ext.content;
							this.images.unshift(url);
						}
						//滑到最底部
						this.imgLoad(this.images)
						.then(res=>{
							this.scrollBottom();
						})
					}
					//不是当前群组
					else if(data.to != this.$route.query.id && data.from != this.userId){
						if(data.type == "chatroom"){
							this.$store.commit("serverHot", true);
							pushMsg(data, "chatroom");
						}
						else{
							setHot(data.to); //开启红点
							unread(data.to);
							//pushMsg(data, "group");
						}
					}
				},
				//收到图片消息
				onPictureMessage:(data)=>{
					//如果是当前群聊
					if(data.to == this.$route.query.id && data.from != this.userId){
						console.log(data);
						//推送
						// if(document.hidden || document.visibilityState == 'hidden'){
						// 	pushMsg(data,'group');
						// }
						var timestamp = Date.parse(new Date()); //当前时间戳
						this.formData.push({
							type:data.ext.type, //text or image?
							msgId:data.id, //消息id
							time:timestamp,
							fromUser:data.from, //发送人id
							fromName:data.ext.name, //发送人名字
							pic:data.ext.photoUrl,
							payload:data.url, //聊天内容
						})
                        //预览
                        this.images.unshift(data.url);
						//滑到最底部
						this.imgLoad(this.images)
						.then(res=>{
							this.scrollBottom();
						})
					}
					//不是当前群组
					else if(data.to != this.$route.query.id && data.from != this.userId){
						if(data.type == "chatroom"){
							this.$store.commit("serverHot", true);
							pushMsg(data, "chatroom");
						}
						else{
							setHot(data.to); //开启红点
							unread(data.to);
							//pushMsg(data, "group");
						}
					}
				},
			})
		},
		//(类型,内容)
		sendMsg:function(type,content){
			if(this.messageSendType === 'txt'){
				this.$refs.myInput.focus(); //保持焦点
				if(mui.os.ios){
					this.footerStyle = {
						position: 'absolute'
					}
				}
			}
			if(content){
				if(content.length<150){
					//防止点多次
					if(this.once){
						this.once = false;
						//判断是否包含表情
						this.emoIndex = -1;
						let word = this.msg;
						let t = "";
						word.replace(/\#[\u4E00-\u9FA5]{1,3}\;/gi, this.ifEmo);
						
						this.$store.commit("setHot", true);
						// this.toast = this.loading('发送中');
						//扩展字段
						var timestamp = Date.parse(new Date()); //当前时间戳
						var id = this.$imconn.getUniqueId();    // 生成本地消息id
						var msg = new WebIM.message('txt', id); // 创建文本消息
						var obj = getUserInfo();
						var params = {
							title:this.title,
							orderId:this.$route.query.orderId,
							type:this.emoIndex>=0?'text':'txt',
							name:obj.userName?obj.userName:'',
							photoUrl:obj.pictureUrl,
							content:content,
							time:timestamp,
							ifAt:this.atId.length>0?true:false, //是否有@
							toAt:this.atId.length>0?this.atId:'', //@谁
						    roleId:this.roleId  //PC用到
						};
						//清空输入框
						if(type == 'text' || type == 'txt'){
							this.msg = '';
							this.atId = [];
						}
						HTTP('msg',{
							roomType:'group',
							content:content,
							userUid:this.userId,
							groupUid:this.$route.query.id,
							ext:JSON.stringify(params)
						})
						.then(res=>{
							if(res.code == 200){
								console.log('发送成功');
								this.once = true;
								//拼到数组中
								this.formData.push({
									type:this.emoIndex>=0?'text':'txt', //text or image?
									msgId:id, //消息id
									time:timestamp,
									fromUser:this.userId, //发送人
									fromName:obj.userName?obj.userName:'', //发送人名字
									pic:obj.pictureUrl,  //发送人头像
									payload:content, //聊天内容
								})
							}
							else{
								this.once = true;
								this.$toast(res.msg);
							}
						})
					}
				}
				else{
					this.$toast('字数不能大于150字符');
				}
			}
			else{
				this.$toast('请输入内容');
			}
		},
		//发送语音消息
		sendVoice:function(url,timeLen){
			console.log(url);  //已经上传好的url
			this.toast = this.loading('发送中');
			var obj = getUserInfo();
			var timestamp = Date.parse(new Date()); //当前时间戳
			var params = {
				title:this.title,
				orderId:this.$route.query.orderId,
				type:'voice',
				name:obj.userName,
				photoUrl:obj.pictureUrl,
				content:url,
				time:timestamp,
				length:timeLen,
				click:false, //波纹
				roleId:this.roleId  //PC用到
			};
			HTTP('msg',{
				roomType:'group',
				content:'语音',
				userUid:this.userId,
				groupUid:this.$route.query.id,
				ext:JSON.stringify(params)
			})
			.then(res=>{
				if(res.code == 200){
					console.log('发送成功');
					this.toast.clear();
					//拼到数组中
					this.formData.push({
						type:'voice',
						time:timestamp,
						fromUser:this.userId, //发送人
						fromName:obj.userName?obj.userName:'', //发送人名字
						pic:obj.pictureUrl,  //发送人头像
						payload:url, //聊天内容
						length:timeLen,
						click:false
					})
				}
				else{
					this.$toast(res.msg);
				}
			})
		},
		//发送图片消息
		sendImage:function(path,baseUrl){
			console.log('this.sendImage()');
			this.toast = this.loading('发送中');
			var _this = this;
			var obj = getUserInfo();
			var timestamp = Date.parse(new Date()); //当前时间戳
			var ext = {
				title:this.title,
				orderId:this.$route.query.orderId,
				type:'image',
				name:obj.userName,
				photoUrl:obj.pictureUrl,
				time:timestamp,
                roleId:this.roleId  //PC用到
			};
			//开始上传
			HTTP('msgImg',{
				roomType:'group',
				base64file:baseUrl,
				userUid:this.userId,
				groupUid:this.$route.query.id,
				ext:JSON.stringify(ext)
			})
			.then(res=>{
				if(res.code == 200){
					this.toast.clear();
					//预览图片数组
					this.images.unshift(res.data.coverPage);
					//写入历史文件
					this.writeHistory('image',baseUrl);
					//拼到数组中
					this.formData.push({
						type:'image',
						msgId:timestamp, //消息id
						time:timestamp,
						fromUser:_this.userId, //发送人
						fromName:obj.userName, //发送人名字
						pic:obj.pictureUrl,  //发送人头像
						payload:res.data.coverPage, //聊天内容res.data.coverPage
					})
				}
				else{
					this.$toast(res.msg);
				}
			})
		},
		//上传录音文件
		uploadVoice:function(obj){
			this.toast = this.loading('加载中');
			let task = window.plus.uploader.createUpload(`${apiConfig.config.baseURL}photoEditor/photoUpload`,{
				method: 'POST',
				headers: {
					"Content-Type": "multipart/form-data"
				}
			},(data, status)=>{
				console.log(data);
				let res = (new Function("return " + data.responseText))();
				//上传完成
				if(res.code == 200){
					console.log('录音的url地址：' + res.data);
					this.sendVoice(res.data,obj.time); //上传完之后发送
				}
				else{
					this.$toast(res.msg);
				}
			})
			task.setRequestHeader('token', getToken());
			task.addFile(obj.path, { key: 'file' }); //path为图片路径，key为后端给的字段名
			task.start(); //开始上传
		},
		//写入历史文件
		writeHistory:function(type,url,coverPage){
			//得到当前日期
			let timestamp = Date.parse(new Date());
			let date = toDate(timestamp,'yyyy-MM-dd');
			//取数据
			let arr = getHistory();
			let obj = {
				groupId:this.$route.query.id,
				list:[
					{
						time:date,
						files:[
							{
								type:type,
								url:url,
								coverPage:type=='video'?coverPage:''
							}
						]
					}
				]
			};
			//如果缓存有数据，修改数据
			if(arr){
				let flag = false;  //false,缓存没有此群组
				arr.map(o=>{
					//缓存有此群组
					if(o.groupId == this.$route.query.id){
						flag = true;
						for(let i=0;i<o.list.length;i++){
							//缓存中有当前日期
							if(o.list[i].time == date){
								o.list[i].files.push({
									type:type,
									url:url,
									coverPage:type=='video'?coverPage:''
								});
							}
							//缓存中没有当前日期
							else{
								o.list[i].unshift({
									time:date,
									files:[
										{
											type:type,
											url:url,
											coverPage:type=='video'?coverPage:''
										}
									]
								});
							}
						}
					}
				})
				//缓存有此群组
				if(flag){
					setHistory(arr);
				}
				//缓存没有此群组
				else{
					arr.push(obj);
					setHistory(arr);
				}
			}
			//缓存没有数据
			else{
				let newArr = [];
				newArr.push(obj);
				setHistory(newArr);
			}
		},
		//识别换行
		enter:function(str){
			let str1=str.replace(/\n/g,"<br/>")
			return str1
		},
		//滚动条最底部
		scrollBottom:function(){
			// let overflow = this.$refs.mainoverflow
			let box = this.$refs.main
			if(!box){
				return
			}
			let run = () => {
				// ui.areaMsgList.scrollTop = ui.areaMsgList.scrollHeight + ui.areaMsgList.offsetHeight;
				//第1页，滚动条在最底部
				if(this.pageCurrent == 1){
					box.scrollTop = box.scrollHeight + box.offsetHeight
					// document.documentElement.scrollTop = overflow.clientHeight;  //滚动条离顶部的距离
					// box.scrollTop = overflow.clientHeight;
				}
				//第N页
				else{
					// document.documentElement.scrollTop = overflow.clientHeight - this.mainHeight;
					// box.scrollTop = overflow.clientHeight - this.mainHeight;
					box.scrollTop = box.scrollHeight + box.offsetHeight - this.mainHeight
				}
				this.mainHeight = box.scrollHeight
			}
			run()
			this.$nextTick(run)
		},
		//判断该订单是否完成
		order_finish:function(){
			HTTP('order_finish',{
				orderUid:this.$route.query.orderId
			})
			.then(res=>{
				if(res.code == 200){
					this.orderFinish = res.data;
					alert(this.orderFinish);
				}
			})
		},
		tapMsgInput(event){
			this.$refs.myInput.focus()
			this.show_more = false
			this.show_emo = false
			setTimeout(() => {
				this.$refs.myInput.focus()
			}, 0)
			// event.detail.gesture.preventDefault()
		},
		inputFocus(){
			this.show_emo = false
			this.footer = true
			// if(mui.os.ios){
			// 	this.footerStyle = {
			// 		position: 'absolute'
			// 	}
			// }
			console.log('foucs')
			let iosShowInput = () => {
				// this.$refs.myInput.focus()
				// this.$refs.myInput.scrollIntoView()
				// this.$refs.myInput.scrollIntoView(false)

				// this.$refs.myInputBox.style.position = 'fixed'
				// this.$refs.myInputBox.style.bottom = '0'
				// this.$refs.myInputBox.style.position = 'absolute'
				this.updateChatWindowsHeight()
				this.scrollBottom()
			}
			;[50, 1000].forEach(e => {
				setTimeout(iosShowInput, e)
			})
		},
		updateChatWindowsHeight(){
			// let run = () => {
				this.chatWindowsHeight = getChatWindowsHeight.bind(this)()
			// 	this.scrollBottom()
			// }
			// ;[0, 50, 100, 500].forEach(e => {
			// 	setTimeout(run, e)
			// })
		},
		inputBlur(){
			// if(mui.os.ios){
			// 	this.footerStyle = {
			// 		position: 'fixed'
			// 	}
			// }
			if(mui.os.ios){
				this.footerStyle = {
					position: inputAbsolute() ? 'absolute' : 'fixed',
				}
			}
			let func = () => {
				this.footer = false
				// this.updateChatWindowsHeight()
				let run = () => {
					this.chatWindowsHeight = '100%'
				}
				;[0, 50].forEach(e => {
					setTimeout(run, e)
				})
			}
			setTimeout(() => {
				// this.$refs.myInput.hasFocus()
				func()
			}, 500)
			func()
		},
		handleSize(){
			this.scrollBottom()
			this.innerHeights.push(window.innerHeight)
			this.innerHeights = this.innerHeights.filter( (item, index ,arr)=>arr.indexOf(item) === index )
			let maxValue = Math.max(...this.innerHeights)
			let minValue = Math.min(...this.innerHeights)
			let open = () => {
				console.log('键盘出来')
			}
			let close = () => {
				console.log('键盘关闭')
				// this.updateChatWindowsHeight()
				this.inputBlur()
			}
			if(this.innerHeights.length == 1){
				open()
				return
			}
			if(window.innerHeight === maxValue){
				close()
			}
			if(window.innerHeight === minValue){
				open()
			}
			// this.showView = false
			// setTimeout(() => {
			// 	this.showView = true
			// })
			// console.log('-------------')
			// console.log(this.innerHeights)
			// console.log(window.innerHeight)
			// console.log(maxValue, minValue)
		}
	},
	filters:{
		toDate:function(time){
			var date = new Date(time);
			return formatDate(date, 'yyyy-MM-dd hh:mm');
		},
	},
	mounted(){
		console.log('1.1.3');
		this.getGroupInfo(); //@功能，群成员
		this.getTitle();
		this.webIm(); //环信
		if(window.plus){
			let CWV = plus.webview.currentWebview()
			let runListenText = false
			CWV.setStyle({
				softinputMode: "adjustResize",
			})
		}
		window.addEventListener('resize', this.handleSize.bind(this), false)
        document.body.addEventListener('focusin', () => {
			console.log('foucusin')
		})
	},
	created:function(){
		this.once = true;  //防止用户点击多次提交
		if(window.plus){
			this.WV = new plus.nativeObj.View(
				'chat',
				{
					top: '0px',
					left: '0px',
					height: '44px',
					width: '100%',
					backgroundColor: '#5E8EFE',
					color: '#ffff',
				},
				[MV_back, WV_right, MV_title('加载中...')]
			)
			this.WV.show()
			this.WV.addEventListener('click', (e) => {
				let lr
				if(e.clientX < (window.innerWidth / 4)){
					lr = 'left'
				}
				if(e.clientX > (window.innerWidth / 4 * 3)){
					lr = 'right'
				}
				// console.log(e, lr)
				if(lr === 'right'){
					this.toDetail()
					return
				}
				if(lr === 'left'){
					this.goBack()
					return
				}
			})
		}
		this.isLoadTitle = false
		console.log('IOS 2');
		//获取userId
		if(getuserUid()){
			this.userId = getuserUid();
		}
		//角色id
		this.roleId = getRole()?getRole():'';
	},
	destroyed(){
		window.removeEventListener('resize', this.handleSize, false)
		let run = () => {
			this.WV && this.WV.hide()
			// WV_textarea.hide()
			plus.webview.currentWebview().setStyle({
				softinputMode: "adjustPan"
			})
		}
		;[0, 50, 100, 1001].forEach(e => {
			setTimeout(run, e)
		})
	}
};
</script>
<style lang="scss" scoped>
.chatbox{
	.list-more{
		text-align: center;
		color: $color-primary;
		padding: 15px 0 10px 0;
	}
	//header
	.header{
		position: relative;
		z-index: 2001;
		.icon{
			//width: .4rem;
		}
		.height{
			height: .9rem;
		}
		.fav-head {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 500;
			width: 100%;
			height: .92rem;
			background-color: #5E8EFE;
			color: #fff;
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}
		.theme-dark {
			background-color: rgb(40,40,40);
			color: #fff;
		}
		.fav-head-left {
			margin-left: .22rem;
		}
		.rightText{
			margin-right: .22rem;
			font-size: .32rem;
		}
		.c-icon {
			font-size: .37rem;
		}
		.c-line-clamp1 {
			display: block;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-size: .35rem;
		}
	}
	.chat-box{
		position: relative;
		height: 100vh;
		width: 100%;
		-webkit-overflow-scrolling: touch;
		overflow: auto;
		padding-top: 44px;
		padding-bottom: 1.8rem;
		box-sizing: border-box;
		// background-color: #00f;
		bottom: 0px;
	}
	//主体
	.chat{
		// position: fixed;
		// top: 0px;
		// left: 0px;
		// right: 0px;
		overflow-y: auto;
		width: 94%;
		margin: 0 auto;
		// padding-bottom: 1.8rem;
		// height: calc(100vh - 10rem);
		// height: 700px;
		// background-color: red;
		// max-height: calc(100vh - .9rem);
		height: 100%;
		// height: calc(100vh - 2.6rem);
		// padding-bottom: .4rem;
		-webkit-overflow-scrolling: touch;
		.item{
			margin: 10px 0 4px 0;
			//时间
			.time{
				span{
					display: inline-block;
					padding: 4px 6px;
					color: #fff;
					border-radius: 3px;
					background-color: #dcdcdc;
				}
			}
			//提醒结算
			.remind{
				color: #555;
				padding: 15px 0;
				text-align: center;
				span{
					color: $color-primary;
				}
			}
			//人物头像
			.profile{
				display: flex;
				margin: 0.3rem 0;
				.pic{
					width: 0.8rem;
					height: 0.8rem;
					overflow: hidden;
					img{
						width: 100%;
						height: 100%;
					}
				}
				.right{
					display: block;
					width: calc(100% - 1rem);
					img{
						width: 50%;
						//min-height: 2rem;
					}
					//来自作品中心
					.works{
						width: 70%;
						.img{
							width: 70%;
							//min-height: 2rem;
						}
						p{
							display: inline-block;
							padding: 4px 10px;
							margin-top: 2px;
							background-color: #C5C5C5;
							color: #fff;
							border-radius: 6px;
						}
					}
				}
				.name{
					color: #999;
					margin: -4px 0 2px 0;
				}
				.msg{
					word-break:break-word;
					position: relative;
					padding: 0.18rem;
					box-sizing: border-box;
					border-radius: 4px;
					font-size: $fz-4;
					max-width: calc(100% - 1rem);
					min-width: 40px;
				}
			}
			//别人
			.other{
				.name{
					text-align: left;
				}
				.voiceLength{
					display: inline-block;
					color: #666;
					padding: 0 6px;
					margin-top: .15rem;
				}
				.msg{
					float: left;
					text-align: left;
					background-color: #fff;
					.playImg{
						display: block;
					}
				}
				.msg:before{
					content:" ";
					position: absolute;
					top: 12px;
					right: 100%;
					border:6px solid transparent;
					border-right-color:#fff;
				}
				.right{
					margin-left: 10px;
					text-align: left;
				}
				.coverPage{
					position: relative;
					width: 3rem;
					height: 2.5rem;
					background-color: #ccc;
					overflow: hidden;
					.bgPic{
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
					}
					.iconPlay{
						width: 1rem;
						height: 1rem;
						position: absolute;
						top: 50%;
						left: 50%;
						margin-top: -0.5rem;
						margin-left: -0.5rem;
						opacity: 0.9;
					}
				}
			}
			//自己
			.self{
				justify-content: flex-end;
				.works{
					float: right;
				}
				.name{
					text-align: right;
				}
				.voiceLength{
					display: inline-block;
					color: #666;
					padding: 0 6px;
					margin-top: .15rem;
				}
				.msg{
					text-align: left;
					float: right;
					background-color: #b2e281;
					.playImg{
						display: block;
						float: right;
						transform:rotate(180deg);
					}
				}
				.msg:before{
					content:" ";
					position: absolute;
					top: 12px;
					right: -12px;
					border:6px solid transparent;
					border-left-color:#b2e281;
				}
				.coverPage{
					float: right;
					position: relative;
					width: 3rem;
					height: 2.5rem;
					background-color: #ccc;
					overflow: hidden;
					.bgPic{
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
					}
					.iconPlay{
						width: 1rem;
						height: 1rem;
						position: absolute;
						top: 50%;
						left: 50%;
						margin-top: -0.5rem;
						margin-left: -0.5rem;
						opacity: 0.9;
					}
				}
				.map{
					float: right;
				}
				.right{
					margin-right: 10px;
					text-align: right;
				}
			}
		}
	}
	//屁股
	.footer{
		z-index: 200;
		left: 0;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
		background-color: #F1F1F1;
		// background-color: #0ff;
		justify-content: space-between;
		box-shadow:$box-shadow-light-1;
		overflow: hidden;
		.plus{
			padding: 0.2rem 0 0 0.3rem;
			img{
				width: 0.4rem;
				margin-right: 0.2rem;
			}
		}
		//输入框
		.into{
			padding: 0.2rem;
			.input{
				width: calc(100% - 1rem);
				margin-left: .1rem;
				border: none;
				height: .6rem;
				line-height: .6rem;
				//padding-right: 4px;
				padding: 4px;
				padding-left: 10px;
				color: #666;
				font-size: $fz-4;
				border-radius: 3px;
			}
			.right{
				width: 1rem;
				text-align: center;
				color: $color-primary;
				font-size: $fz-4;
				margin-left: 0.1rem;
			}
		}
		//表情
		.emo{
			padding: 0.2rem;
			border-top: 1px solid $border-color-base;
			#emoji{
				width: 100%;
				height: 3.16rem;
				background: #F1F1F1;
				overflow: hidden;
			}
		}
		//more
		.more{
			padding: 0.2rem;
			border-top: 1px solid $border-color-base;
			display: flex;
			flex-wrap: wrap;
			height: 3.8rem;
			li{
				width: 25%;
				text-align: center;
				list-style:none;
				margin: .13rem 0;
				img{
					width: 60%;
				}
				p{
					color: #666;
					padding-top: 4px;
				}
			}
		}
	}
	//编辑图片
	.editImg{
		display: flex;
		align-items: center;
		img{
			height: 100%;
		}
		p{
			width: 10px;
			color: #666;
		}
	}
	.editImgEnd{justify-content:flex-end}
	//@功能
	.at{
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		ul{
            margin-top: 1rem;
			li{
				display: flex;
				position: relative;
				padding: 10px;
				.pic{
					width: 0.8rem;
					height: 0.8rem;
					overflow: hidden;
					img{
						width: 100%;
						height: 100%;
					}
				}
				.name{
					height: 0.8rem;
					line-height: 0.8rem;
					padding-left: 10px;
					font-size: $fz-5;
				}
			}
			li:after{
				content: "";
				position: absolute;
				left: calc(0.8rem + 20px);
				right: 0;
				bottom: 0;
				bottom: 0;
				border-bottom: 1px solid $border-color-base;
			}
		}
	}
	//地图
	.map{
		width: 5rem;
		.title{
			width: 100%;
			background-color: #fff;
			padding: 6px 0;
			h3{
				width: 95%;
				margin: 0 auto;
				padding-bottom: 2px;
				font-weight: normal;
				word-wrap: normal;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}
			p{
				width: 95%;
				margin: 0 auto;
				color: #666;
				word-wrap: normal;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}
		}
	}
	#voice{
		.btn{
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 1.1rem;
			line-height: 1.1rem;
			//height: 50px;
			//line-height: 50px;
			text-align: center;
			background-color: #fff;
		}
		//按住的状态
		.press{
			background-color: #F5F5F5;
		}
	}

	//显示录音图标
	.speak{
		position: fixed;
		left: 50%;
		bottom: 4rem;
		margin-left: -1rem;
		color: #fff;
		width: 2rem;
		background-color: #252525;
		opacity: 0.8;
		text-align: center;
		border-radius: 6px;
		padding: 0.3rem 0;
		z-index: 500;
		img{
			width: 50%;
		}
		p{
			padding-top: 10px;
		}
	}
}
</style>